<template>
  <div class="ListCls" v-loading="loading">
    <div class="list_top_div">
      <el-button icon="el-icon-arrow-left" type="info" @click="$router.go(-1)" size="mini">返回</el-button>
    </div>
    <div>
      <el-table :data="MenuList" :row-class-name="RowCls">
        <el-table-column prop="pk_Menu" width="150" label="ID"></el-table-column>
        <el-table-column prop="Name_CHS" label="名称"></el-table-column>
        <el-table-column prop="Url" label="路径"></el-table-column>
        <el-table-column prop="TypeName_CHS" label="类型">
          <template slot-scope="scope">
            <span :style="'color:'+scope.row.Visual">{{scope.row.TypeName_CHS}}</span>
          </template>
        </el-table-column>
        <el-table-column label="开启权限">
          <template slot-scope="scope">
            <el-checkbox-group v-model="CheckDt">
              <el-checkbox :label="scope.row.pk_Menu">
                <span></span>
              </el-checkbox>
            </el-checkbox-group>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="list_footer">
      <el-button @click="submit" icon="el-icon-check" type="primary" size="small">保存</el-button>
      <el-button size="small" icon="el-icon-close" @click="$router.go(-1)">取消</el-button>
    </div>
  </div>
</template>
<style>
.el-table .success-row {
  background: #f0f9eb;
}
</style>
<style lang="scss" scoped>
.list_top_div {
  padding-bottom: 10px;
  border-bottom: 1px solid #f7f7f7;
}
.list_footer {
  padding-top: 10px;
}
</style>
<script>
export default {
  data () {
    return {
      MenuList: [],
      CheckDt: [],
      loading: true
    }
  },
  methods: {
    //行判断是否为最高级，是则添加背景色class
    RowCls ({ row, rowIndex }) {
      if (row.ParentID === 0) {
        return "success-row"
      }
    },
    //提交、添加
    submit () {
      this.$axios({
        url: '/HrApi/RoleMange/UpdateRoleCheck',
        method: 'POST',
        data: this.$Qs.stringify(
          {
            pk_Name: this.$route.query["pk_Name"],
            CheckDt: this.CheckDt
          },
          {
            indices: false
          })
      }).then(res => {
        if (!res.data.code) {
          this.$message.success(res.data.msg)
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }
  },
  mounted () {
    this.$route.meta.title = this.$route.query["RoleName_CHS"]
    //获取所有菜单列表
    this.$axios({
      url: "/HrApi/RoleMange/GetMenuList",
      method: 'GET',
      params: {
        pk_Name: this.$route.query["pk_Name"]
      }
    }).then(res => {
      if (!res.data.code) {
        this.MenuList = res.data.data.MenuPage
        this.CheckDt = res.data.data.CheckDt
        this.loading = false
      }
    })
  }
}
</script>